<html>
    <head>
        <title>能耗类比</title>
        <link rel="stylesheet" href="../../../assets/bundle.element.css">
        <link rel="stylesheet" href="../../../style.css">


        <style>
            .dateSign{
                border: solid 0px red;
            }

            .dateSign .el-radio{
                margin-right: -8px;
            }

            #site-tree .tree-container{
                border-right:solid 1px #e7e7e7;
            }

        </style>

    </head>
    <body>
        <div class="page" id="page-vue">
            <div class="">
                <el-row>
                    <el-col :span="4">
                        <dev-tree v-on:click-node="onClickTree" v-bind:ischeckbox="false" :tabsign="'p'"  :energy="energyType"></dev-tree>
                    </el-col>
                    <el-col :span="20">

                                <el-form :inline="true" style="margin-bottom: 0px;">
                                    <!--
                                    <el-form-item label="日期" class="dateSign">
                                            <el-radio-group v-model="dateSign" style="margin-top: 13px;" >
                                                    <el-radio label="lastDay">昨日</el-radio>
                                                    <el-radio label="lastWeek">上周</el-radio>
                                                    <el-radio label="lastMonth">上月</el-radio>
                                                    <el-radio label="lastQuarter">上季度</el-radio>
                                                    <el-radio label="lastYear">上一年</el-radio>
                                                    <el-radio label="auto">自定义</el-radio>
                                                  </el-radio-group>
                                    </el-form-item>
                                    -->

                                    <el-form-item v-show="dateSign=='auto'" label="日期" size="small" style="margin-top: 4px; margin-left:0px;">
                                            <el-date-picker
                                            v-model="beginTime"
                                            :type="dateType"
                                            placeholder="选择日期"
                                            style="width: 150px;"
                                            value-format="yyyy-MM-dd"
                                            @change="dateChange"
                                            >
                                          </el-date-picker>
                                    </el-form-item>

                                    <el-form-item v-show="dateSign=='auto'" label="周期"  size="small" style="margin-top: 4px;">
                                            <el-radio-group v-model="cycle" @change="onChangeCycle">
                                                    <el-radio-button label="日"></el-radio-button>
                                                    <!--
                                                    <el-radio-button label="周"></el-radio-button>
                                                    -->
                                                    <el-radio-button label="月"></el-radio-button>
                                                    <el-radio-button label="年"></el-radio-button>
                                                  </el-radio-group>
                                          </el-date-picker>
                                    </el-form-item>

                                </el-form>

                                <el-form :inline="true" style="margin-top: 10px;">
                                    <el-tooltip effect="dark" content="请点击左边树中设备" v-model="tooltip" placement="right">
                                        <el-form-item label="对象选择">
                                                <el-tag
                                                    v-for="tag in tags"
                                                    :key="tag.name"
                                                    closable
                                                    @close="onTagClose(tag)">
                                                {{tag.name}}
                                              </el-tag>
                                        </el-form-item>
                                    </el-tooltip>
                                </el-form>

                                <el-row>
                                    <el-col :span="24">
                                        <div class="chart-outer">
                                            <h6>能耗类比</h6>
                                            <chart-line v-bind:data="eleChartData1"></chart-line>
                                        </div>
                                    </el-col>
                                </el-row>

                                <el-row >
                                    <el-col :span="12">
                                        <div class="chart-outer">
                                            <h6>用能分析</h6>
                                            <chart-bar v-bind:data="eleChartData2"></chart-bar>
                                        </div>
                                    </el-col>

                                    <el-col :span="12">
                                        <div class="chart-outer">
                                            <h6>用能占比</h6>
                                            <chart-pie v-bind:data="eleChartData3"></chart-pie>
                                        </div>
                                    </el-col>
                                </el-row>




                    </el-col>
                </el-row>

            </div>


        </div>
        <script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
        <script>

                var vuePage=new Vue({
                    el:'#page-vue',
                    data:{
                        tabName:'tabEle',
                        dateSign:'auto',
                        dateType:'date',
                        beginTime:'',
                        dataTime:'',
                        cycle:'日',
                        tags:[],
                        tooltip:false,
                        eleChartData1:{
                            title:'',
                            x:[],
                            y:[]
                        },
                        eleChartData2:{},
                        eleChartData3:{},
                        orginData:[],
                        energyType:'',
                    },
                    methods:{
                        search:function(){
                            alert(this.status);
                        },
                        dateChange(){
                            this.dataTime = this.beginTime;
                            this.loadEnergyDatas();
                        },
                        onClickTree(node){
                            if(node.id.substr(0,1)!="D"){ //必须点击设备
                                return;
                            }
                            for(var i=0;i<this.tags.length;i++){
                                if(this.tags[i].id==node.dataId){
                                    ispush = false;
                                    return;
                                }
                            }
                            this.tags.push({id:node.attributes.deviceId,name:node.text});
                            this.loadEnergyDatas();
                        },
                        onTabClick(tab,event){

                        },
                        onTagClose(tag){
                            this.tags.splice(this.tags.indexOf(tag), 1);
                            for(var i=0;i<this.orginData.length;i++){
                                if(!this.orginData[i].data[0]){continue;}
                                if(this.orginData[i].data[0].attributes.deviceId==tag.id){
                                    this.orginData.splice(i,1);
                                    break;
                                }
                            }

                            this.refreshChart();

                        },
                        onChangeCycle(){
                            switch(this.cycle){
                                case "日":
                                    this.dateType='date';
                                    this.dataTime = this.beginTime;
                                break;
                                case "月":
                                    this.dateType='month';
                                    this.dataTime = this.beginTime.substr(0,7);
                                break;
                                case "年":
                                    this.dateType='year';
                                    this.dataTime = this.beginTime.substr(0,4);
                                break;
                            }

                            this.loadEnergyDatas();

                        },

                        loadEnergyDatas:function(){
                            var _self = this;
                            var idArr=[];
                            for(var i=0;i<this.tags.length;i++){
                                idArr.push(this.tags[i].id);
                            }
                            var dArr = this.dataTime.split('-');
                            var params=[];
                            for(var i=0;i<idArr.length;i++){
                                params.push({
                                    url:'Analysis/getEnergyUse',
                                    type:'get',
                                    param:{
                                        zoneIds:idArr[i],
                                        zoneType:3,
                                        energyType:this.energyType,
                                        year:dArr[0]||0,
                                        month:dArr[1]||0,
                                        day:dArr[2]||0
                                    }
                                });
                            }
                            HttpUtil.when(params).success(function(data){
                                console.log('getEnergyUseArr',data);
                                _self.orginData = data;
                                _self.refreshChart();

                            });
                        },

                        refreshChart: function () {
                            var fid,max;
                            var xdata = [], ydata = [];


                            for (var i = 0; i < this.orginData.length; i++) {
                                var yValue = [], name = '';
                                var item = this.orginData[i].data[0];
                                if(!item) continue;

                                name = item.groupName;

                                if(this.cycle == "日"){
                                    fid = 4;
                                    max = 24;
                                }else if(this.cycle == "月"){
                                    fid = 4;
                                    max = item.field03;
                                }else if(this.cycle == "年"){
                                    fid=2;
                                    max =12;
                                }


                                for (var j = 0; j < max; j++) {
                                    var field = j + fid;
                                    if (field < 10) field = '0' + field;
                                    yValue.push(item['field' + field]);

                                    if (i == 0) { //x轴都一样
                                        xdata.push(j + 1);
                                    }
                                }

                                ydata.push({
                                    name: name,
                                    value: yValue
                                });


                            }


                            this.eleChartData1 = {
                                title: '',
                                x: xdata,
                                y: ydata
                            };

                            var ydata2 = [], ydata3 = [];
                            for (var i = 0; i < ydata.length; i++) {
                                var sum = 0;
                                for (var j = 0; j < ydata[i].value.length; j++) {
                                    sum += ydata[i].value[j];
                                }
                                ydata2.push({
                                    name: ydata[i].name,
                                    value: [sum]
                                });

                                ydata3.push({
                                    name: ydata[i].name,
                                    value: sum
                                });
                            }



                            this.eleChartData2 = {
                                title: '',
                                y: ydata2
                            };

                            this.eleChartData3 = {
                                title: "",
                                y: ydata3
                            };

                            console.log('eleChartData1', this.eleChartData1);
                        }
                    },
                    created:function(){

                        this.beginTime = TimeUtil.convertToString(new Date()).substr(0,10);
                        this.dataTime = this.beginTime;
                        this.energyType =HttpUtil.getQueryString('energyType');

                    },
                    mounted:function(){
                        this.tooltip = true;
                    }
                });


            </script>
    </body>
</html>
